<template>
  <div class="app-container">
    <div class="tip d-flex align-items-center">
      <span>当前缺水程度：</span>
      <span
        style="
          display: inline-block;
          width: 18px;
          height: 18px;
          background: #f20;
          border-radius: 50%;
        "
      ></span>
    </div>
    <div class="h12"></div>
    <div class="content font24 font-bold">
      <l-map
        :center="center"
        :options="options"
        :zoom="zoom"
        @update:center="centerUpdate"
        @update:zoom="zoomUpdate"
      >
        <l-tile-layer v-for="(item, index) in urls" :key="index" :url="item" />

        <map-semi-circle
          v-for="(item, index) in cellsFormat"
          :key="'semicircle-' + index"
          :lat-lng="item.location"
          :options="item.options"
        />
      </l-map>
      <div class="colors">
        <dl v-for="(item, index) in levelV" :key="index" class="flex">
          <dt
            class="d-flex align-items-center"
            :style="{ background: item.color }"
          >
            <i
              class="mr4 font20"
              :class="
                +item.step === +step
                  ? 'el-icon-circle-check'
                  : 'el-icon-remove-outline'
              "
            />
            <span>{{ item.lower + ' ~ ' + item.upper }}</span>
          </dt>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
  import { map, cellsSprinkler, levelV } from '@/utils/constant'
  import MapSemiCircle from '@/components/MapSemiCircle'
  import { deepClone, arraySort } from '@/utils'
  export default {
    components: {
      MapSemiCircle,
    },
    data() {
      return {
        activeName: 'first',
        daterange: '',
        zoom: map.zoom,
        center: map.center,
        options: map.options,
        urls: map.mapTypes[map.initType],
        cellsSprinkler,
        levelV,
      }
    },
    computed: {
      cellsFormat() {
        const cellsSprinkler = deepClone(this.cellsSprinkler)
        return arraySort(cellsSprinkler, 'disend')
      },
    },
    methods: {
      zoomUpdate(zoom) {
        this.zoom = zoom
      },
      centerUpdate(center) {
        this.center = center
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    height: 770px;
    text-align: center;
  }
  .colors {
    position: absolute;
    top: 0;
    left: 54px;
    z-index: 999;
    dl {
      align-items: center;
      font-size: 12px;
      dt {
        width: 120px;
        height: 30px;
        line-height: 30px;
        color: #000;
        text-align: left;
        text-indent: 8px;
      }
    }
  }
</style>
